import React from 'react';
import { Link } from 'react-router-dom';

import comlogo from '../../../asset/images/commercialtenant/comlogo.jpg';
import youhuijusn from '../../../asset/images/commercialtenant/youhuijusn.png';

import styles from './index.module.less';
export default class ShopIndex extends React.Component {
  state={
    picList: [
      { pic: require('../../../asset/images/high/high1.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3100 },
      { pic: require('../../../asset/images/high/you2.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3200 },
      { pic: require('../../../asset/images/high/you3.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3300 },
      { pic: require('../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
      { pic: require('../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
      { pic: require('../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
      { pic: require('../../../asset/images/high/you1.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3100 },
      { pic: require('../../../asset/images/high/you2.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3200 },
      { pic: require('../../../asset/images/high/you3.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3300 },
      { pic: require('../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
      { pic: require('../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
      { pic: require('../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
    ],
  };
  render() {
    const { picList } = this.state;
    return (
      <React.Fragment>
        {/* 店铺介绍 */}
        <div className={styles.Box}>
          <div className={styles.top}>
            <div className={styles.pullLeft + ' ' + styles.text1}>
            店铺介绍
            </div>
            <div className={styles.pullLeft + ' ' + styles.text2}>
             详细介绍
            </div>
            <div className={styles.pullRight}>
              <Link to='/commercial-tenant/shop-introduced'>查看更多 > </Link>
            </div>
          </div>
          <div className={styles.clearfix}></div>
          <div className={styles.line}></div>
          <div className={styles.bottom}>
            <div className={styles.pullLeft}>
              <div className={styles.imge}><img src={comlogo} alt=""/></div>
              <div className={styles.pullLeft}>
                <div className={styles.text1}>大连塑料有限公司</div>
                <div className={styles.text2}>资质信息：<button className={styles.btn1}>企业认证</button> <button className={styles.btn2}>保证金</button></div>
                <div><span>所在地区：</span>   辽宁省/大连市</div>
                <div><span>详细地址：</span>   辽宁省大连市开发区二道街38号</div>
                <div><span>经营范围：</span>   废金属    废塑料    废纸</div>
              </div>
            </div>
            <div className={styles.line2}></div>
            <div className={styles.text3}>
              <Link to='/'>
                大连花园口经济区万宝废旧物资回收站专业上门回收废品,免费估价,现金交易！
                面向上海各大区地区废品回收范围包括:废铜、废铝、废铁、焊锡、不锈钢、铝合金等废旧金属及设备和一切利用物资。欢迎新老客户来电咨询！
                废品回收对象：面向酒店、商场、宾馆、工厂、码头、学校、公司、银行、机场，海关、网吧、机关、学校、医院、超市、娱乐场所、建筑工地以及家庭等回收一切的废品。
              </Link>
            </div>
          </div>
        </div>
        {/* 中间图片 */}
        <div className={styles.clearfix}></div>
        <div className={styles.Box + ' ' + styles.centerbox}>
          <div className={styles.top}>
            <div className={styles.pullLeft + ' ' + styles.text1}>
            最新商品
            </div>
            <div className={styles.pullRight}>
              <Link to='/commercial-tenant/shop-sell'>查看更多 > </Link>
            </div>
          </div>
          <div className={styles.clearfix}></div>
          <div className={styles.line}></div>
          <div className={styles.contentImg}>
            <div className={styles.contentImgsBox}>
              {picList.map((item, index) => {
                return (
                  <div key={index} className={styles.ImgBox + ' ' + styles.pullLeft}>
                    <div className={styles.contentImgs} >
                      <Link to="/"><img src={item.pic} alt=""/></Link>
                      <Link className={styles.contentImgsText} to="/">
                        <div>库存:12.56吨</div>
                      </Link>
                    </div>
                    <div className={styles.contentImgsTitle}>
                      <Link to="/">{item.title}</Link>
                    </div>
                    <div className={styles.contentImgsTitle2}>
                      <span className={styles.contentImgsAddress}>{item.city}</span>
                      <span className={styles.contentImgsPrice}>{item.price}元/吨</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

        </div>
        {/* 店铺资质 */}
        <div className={styles.Box + ' ' + styles.contentLeft}>
          <div className={styles.top2}>
            <div className={styles.pullLeft + ' ' + styles.text1}>
            店铺资质
            </div>
            <div className={styles.pullRight}>
              <Link to='/commercial-tenant/shop-qualification'>查看更多 > </Link>
            </div>
          </div>
          <div className={styles.clearfix}></div>
          <div className={styles.line}></div>
          <div className={styles.bottomBox1}>
            <div><span> 企业名称：</span>大连塑料有限公司 <i className={`iconfont icon-qiye ${styles.qiyeIcon}`}></i></div>
            <div><span> 法定代表：</span>  杨正</div>
            <div><span> 成立日期：</span>  2018-08-08</div>
            <div><span> 注册地址：</span>  辽宁省大连市开发区二道街38号</div>
            <div><span> 经营范围：</span>  工商执照的经营范围</div>
            <div><span> 保证金&nbsp;&nbsp;&nbsp;&nbsp;: </span>   50,000人民币 <i className={`iconfont icon-baozhengjin ${styles.baozhengjinIcon}`}></i></div>
          </div>
        </div>
        <div className={styles.Box + ' ' + styles.contentRight}>
          <div className={styles.top2}>
            <div className={styles.pullLeft + ' ' + styles.text1}>
            联系方式
            </div>
            <div className={styles.pullRight}>
              <Link to='/commercial-tenant/shop-contact'>查看更多 > </Link>
            </div>
          </div>
          <div className={styles.clearfix}></div>
          <div className={styles.tableBox}>
            <table>
              <tbody>
                <tr>
                  <td className={styles.t1}>公司名称</td>
                  <td className={styles.t2}>大连塑料有限公司</td>
                </tr>
                <tr>
                  <td>公司地址</td>
                  <td>辽宁省大连市开发区二道街38号</td>
                </tr>
                <tr>
                  <td>联系人</td>
                  <td>大连塑料有限公司</td>
                </tr>
                <tr>
                  <td>手机号</td>
                  <td>18888888888</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className={styles.clearfix}></div>
        {/* 优惠卷 */}
        <div className={styles.Box} style={{ marginTop: '20px' }}>
          <div className={styles.top}>
            <div className={styles.pullLeft + ' ' + styles.text1}>
            优惠卷
            </div>
            <div className={styles.pullRight}>
              <Link to='/commercial-tenant/special-offer'>查看更多 > </Link>
            </div>
          </div>
          <div className={styles.clearfix}></div>
          <div className={styles.line}></div>
          <div className={styles.bottom}>
            <Link className={styles.pullLeft} style={{ marginRight: '20px' }} to='/'><img src={youhuijusn} alt=''/></Link>
            <Link className={styles.pullLeft} to='/'><img src={youhuijusn} alt=''/></Link>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
